import React, { PureComponent } from 'react';
import { WebView, InteractionManager } from 'react-native';

type Props = {
  navigation?: any,
}

type State = {
  source: object,
}

class WebScene extends PureComponent<Props, State> {

  /*静态设置标题
  static navigationOptions = {
    title: 'Home',
  }; 
  */
  //动态设置标题  
  static navigationOptions = ({ navigation }) => ({
    title: navigation.state.params.title,
  })
  //构造函数，初始化需要的state
  constructor(props: Object) {
    super(props)
    this.state = {
      source: {}
    }
  }

  onLoadEnd = (e: any) => {
    // 如果获取到标题的长度大于0
    if (e.nativeEvent.title.length > 0) {
      // 修改标题
      this.props.navigation.setParams({ title: e.nativeEvent.title })
    }
  }
  //控件渲染前触发
  componentWillMount () {
    console.log('控件渲染前触发')
  }
  render () {
    console.log('渲染控件的方法	')
    return (
      <WebView
        source={this.state.source}  //  source: { uri: 'http://' }
        onLoadEnd={this.onLoadEnd} //webview 页面加载完毕执行
      />
    );
  }
  componentDidMount = () => {
    console.log('控件渲染后触发	')
    InteractionManager.runAfterInteractions(() => {
      this.props.navigation.setParams({ title: '加载中...' })
      setTimeout(() => {
        this.setState({ source: { uri: this.props.navigation.state.params.uri } })
      }, 100)
    })
  }
  componentWillReceiveProps () {
    console.log('组件接收到新的props时被调用	')
  }
  // shouldComponentUpdate(){
  //   console.log('当组件接收到新的props和state时被调用	')
  // }
  componentWillUpdate () {
    console.log('props或者state改变，并且此前的shouldComponentUpdate方法返回为 true会调用该方法	')
  }
  componentDidUpdate () {
    console.log('组件重新渲染完成后会调用此方法')
  }
  componentWillUnmount () {
    console.log('组件卸载和销毁之前被调用')
  }
}

export default WebScene;
